
<template>
    <div>
        <h2>默认插槽</h2>
         <!-- 默认插槽 可以不写name属性 -->
        <slot name="default" :shuju="message"></slot>
        <h2>具名插槽</h2>
        <!-- 具名插槽 -->
        <slot name="center" :shuju="message"></slot>
        <h2>作用域插槽</h2>
        <!-- 作用域插槽           自定义属性-->
        <slot name="zuoyongyu" :shuju="message"></slot>
        
        <h3>用户列表</h3>
        <ul>
            <li v-for="value in source" :key="value.id">
                <slot :user="value"></slot>
            </li>
        </ul>
    </div>
</template>
<script setup>
import { ref } from 'vue'

//定义数据  传递数据到作用域插槽
const message = ref('我是子组件的数据:Vue3')
const source = ref([
    {id:1, name: '张三', age: 18},
    {id:2, name: 'wangwu', age: 18},
    {id:3, name: 'lisi', age: 18},
])


</script>

<style scoped>
    
</style>